<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en"> <!--<![endif]-->

<!-- Head BEGIN -->
<head>
    <meta charset="utf-8">
    <title>Men category | Metronic Shop UI</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta content="Metronic Shop UI description" name="description">
    <meta content="Metronic Shop UI keywords" name="keywords">
    <meta content="keenthemes" name="author">

    <meta property="og:site_name" content="-CUSTOMER VALUE-">
    <meta property="og:title" content="-CUSTOMER VALUE-">
    <meta property="og:description" content="-CUSTOMER VALUE-">
    <meta property="og:type" content="website">
    <meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
    <meta property="og:url" content="-CUSTOMER VALUE-">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/favicon.ico" rel="SHORTCUT ICON" type="image/ico">

    <head th:include="common/Head :: headCss"></head>

    <!-- Fonts START -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"
          type="text/css">
    <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=all" rel="stylesheet" type="text/css">
    <!-- Fonts END -->

    <!-- Global styles START -->
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <link href="../bootstrap/user/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Global styles END -->

    <!-- Page level plugin styles START -->
    <link href="../bootstrap/user/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <!-- for slider-range -->
    <link href="../bootstrap/user/plugins/bxslider/jquery.bxslider.css" rel="stylesheet">
    <link href="../bootstrap/user/plugins/rateit/src/rateit.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
    <!-- Page level plugin styles END -->

    <!-- Theme styles START -->
    <link href="../bootstrap/user/css/style-metronic.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/style-responsive.css" rel="stylesheet" type="text/css">
    <link href="../bootstrap/user/css/custom.css" rel="stylesheet" type="text/css">
    <!-- Theme styles END -->
    <!--<link href="../layui/css/layui.css" rel="stylesheet">-->

    <link href="../bootstrap/js/project/sys/shop/css/fileinput.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../bootstrap/dataTable/datatables.min.css"/>
    <style>
        .laytable-cell-1-id { /*最后的pic为字段的field*/
            height: 100%;
            max-width: 100%;
        }


        .layui-table > thead > tr {

            height: 50px !important;
        }

        .layui-table > tbody > tr > td > div {
            height: 100% !important;
        }

        .btn-primary {
            background: #e94d1c;
            border-color: #e94d1c;
        }

        .layui-table-fixed-r {
            display: none;
        }
    </style>
</head>
<!--<style type="text/css">
    .table > tbody > tr > td {
        text-align: center;
    }

    /* dataTables表头居中 */
    .table > thead:first-child > tr:first-child > th {
        text-align: center;
    }
</style>-->
<!-- Head END -->

<!-- Body BEGIN -->
<body>
<div id="wrapper">

    <!-- BEGIN TOP BAR -->
    <div th:include="common/userShopHead :: head"></div>
    <!-- END TOP BAR -->

    <!-- BEGIN HEADER -->
    <div th:include="common/userShopHead :: head-navigation"></div>
    <!-- END HEADER -->

    <div class="main">
        <div class="container">
            <ul class="breadcrumb">
                <li><a href="/touristShop/index">主页</a></li>
                <li class="active">我的订单</li>
            </ul>


            <div class="row margin-bottom-40 ">

                <div class="col-md-12 col-sm-12">

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <div class="ibox-tools">
                                        <a class="collapse-link">
                                            <i class="fa fa-chevron-up"></i>
                                        </a>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                            <i class="fa fa-wrench"></i>
                                        </a>
                                        <ul class="dropdown-menu dropdown-user">
                                            <li><a href="#">Config option 1</a>
                                            </li>
                                            <li><a href="#">Config option 2</a>
                                            </li>
                                        </ul>
                                        <a class="close-link">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="ibox-content">
                                    <table id="demo" lay-filter="test"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- BEGIN BRANDS -->
    <div th:include="common/Head :: brands"></div>
    <!-- END BRANDS -->
</div>

<div th:include="common/Head :: js"></div>

<script src="../bootstrap/js/dept/js/vue.min.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取消收藏</a>
</script>

<script src="../bootstrap/js/dept/js/bootstrapValidator.js"></script>

<script src="../bootstrap/js/project/sys/shop/js/fileinput.min.js"></script>
<script src="../bootstrap/js/project/sys/shop/js/zh.js"></script>
<!--
<script src="../bootstrap/js/project/sys/shop/js/shopData.js"></script>

-->
<script type="text/javascript" src="../bootstrap/js/project/search.js"></script>
<script type="text/javascript" src="../bootstrap/user/scripts/index.js"></script>
<script src="../bootstrap/js/project/user/shop/index/js/order.js"></script>
<script type="text/javascript" src="../bootstrap/dataTable/datatables.min.js"></script>

<!-- Page-Level Scripts -->
<script th:inline="none">

    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            , height: 600
            , url: '/shopDetail/myOrderData' //数据接口
            , page: true //开启分页
            , cols: [[ //表头

                {field: 'id', title: '商品名', width: 100, align: 'center', sort: true,}
                , {field: 'name', title: '商品名', width: 290, align: 'center', sort: true,}
                , {field: 'pirce', title: '金额', width: 130, sort: true, align: 'center'}
                , {field: 'num', title: '商品剩余数量', width: 130, sort: true, align: 'center'}
                , {
                    field: 'register', title: '上架时间', width: 150, align: 'center',
                    templet: function (d) {
                        console.log(d.register)
                        return new Date(d.register).Format("yyyy-MM-dd")
                    }
                }
                , {
                    field: 'id',
                    title: '商品图',
                    width: 155,
                    sort: true,
                    align: 'center',
                    //   style: 'height:200px !important;',
                    templet: function (d) {   //@{${com_list.pageaddr}+${com_list.saveFileName}}
                        var a = "<img src=" + d.pageaddr + d.saveFileName + ">"
                        return a

                    }
                }
                , {fixed: 'right', title: '操作', width: 140, align: 'center', toolbar: '#barDemo'}

            ]]
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                console.log(data.id)

                window.open("/order/myOrderDetail?id=" + data.id + "&actionType=1");

                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除收藏吗', function (index) {
                    $.get("/shopDetail/delCollect?shopId=" + data.id, function (r) {
                        console.log(r)
                        if (r.Status == 0) {
                            layer.msg(r.msg, {icon: 1, time: 1000});
                            obj.del(); //删除对应行（tr）的DOM结构
                            layer.close(index);
                        }else {
                            layer.msg(r.msg, {icon: 2, time: 1000});
                        }
                    })
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                window.open("/shopDetail/detail?id=" + data.id);
            }
        });


    });


    var data;


    //对Date 类进行扩展
    Date.prototype.Format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    $(function () {
        $('.layui-table th:first').css("height", "50px");
        $('.brands').css("display", "none");

        $('.search-btn').click(function () {
            if ($('.search-btn').hasClass('show-search-icon')) {
                if ($(window).width() > 767) {
                    $('.search-box').fadeOut(300);
                } else {
                    $('.search-box').fadeOut(0);
                }
                $('.search-btn').removeClass('show-search-icon');
            } else {
                if ($(window).width() > 767) {
                    $('.search-box').fadeIn(300);
                } else {
                    $('.search-box').fadeIn(0);
                }
                $('.search-btn').addClass('show-search-icon');
            }
        });
    })

    function shop(id) {
        alert(id)
    }


</script>
<script type="text/html" id="zizeng">
    {{d.LAY_TABLE_INDEX+1}}
</script>
<!-- END PAGE LEVEL JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>